<template>
  <div class="project-card" @click="handleCardClick">
    <!-- 项目头部 -->
    <div class="card-header">
      <div class="project-info">
        <div class="project-avatar">
          <el-avatar 
            :size="32" 
            :src="project.projectAvatarUrl"
            :icon="Folder"
          >
            {{ project.name?.charAt(0).toUpperCase() }}
          </el-avatar>
        </div>
        <div class="project-meta">
          <h4 class="project-name">{{ project.name }}</h4>
          <div class="project-priority">
            <el-tag 
              :type="getPriorityType(project.priority)" 
              size="small"
            >
              {{ getPriorityLabel(project.priority) }}
            </el-tag>
          </div>
        </div>
      </div>
      <div class="card-actions" v-if="canManage" @click.stop>
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button :icon="MoreFilled" size="small" text />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit" :icon="Edit">
                {{ $t('common.edit') }}
              </el-dropdown-item>
              <el-dropdown-item command="delete" :icon="Delete" divided>
                {{ $t('common.delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 项目描述 -->
    <div class="card-content" v-if="project.description">
      <p class="project-description">{{ truncateText(project.description, 80) }}</p>
    </div>

    <!-- 项目进度 -->
    <div class="card-progress">
      <div class="progress-info">
        <span class="progress-label">{{ $t('project.progress') }}</span>
        <span class="progress-value">{{ project.progress }}%</span>
      </div>
      <el-progress 
        :percentage="project.progress" 
        :stroke-width="6"
        :show-text="false"
        :color="getProgressColor(project.progress)"
      />
    </div>

    <!-- 项目时间信息 -->
    <div class="card-dates" v-if="project.startDate || project.endDate">
      <div class="date-item" v-if="project.startDate">
        <el-icon><Calendar /></el-icon>
        <span>{{ $t('project.startDate') }}: {{ formatDate(project.startDate) }}</span>
      </div>
      <div class="date-item" v-if="project.endDate">
        <el-icon><Calendar /></el-icon>
        <span>{{ $t('project.endDate') }}: {{ formatDate(project.endDate) }}</span>
      </div>
      <div class="date-item overdue" v-if="isOverdue">
        <el-icon><Warning /></el-icon>
        <span>{{ $t('project.overdue') }}</span>
      </div>
    </div>

    <!-- 项目经理 -->
    <div class="card-manager" v-if="project.projectManagerId">
      <div class="manager-info">
        <el-icon><User /></el-icon>
        <span>{{ $t('project.manager') }}: {{ getManagerName(project.projectManagerId) }}</span>
      </div>
    </div>

    <!-- 项目统计 -->
    <div class="card-stats">
      <div class="stat-item">
        <el-icon><Document /></el-icon>
        <span>{{ project.taskCount || 0 }} {{ $t('project.tasks') }}</span>
      </div>
      <div class="stat-item">
        <el-icon><Bell /></el-icon>
        <span>{{ project.announcementCount || 0 }} {{ $t('project.announcements') }}</span>
      </div>
    </div>

    <!-- 项目标签 -->
    <div class="card-footer">
      <div class="project-tags">
        <el-tag 
          v-if="isOverdue" 
          type="danger" 
          size="small"
          effect="dark"
        >
          {{ $t('project.overdue') }}
        </el-tag>
        <el-tag 
          v-if="isNearDeadline" 
          type="warning" 
          size="small"
        >
          {{ $t('project.nearDeadline') }}
        </el-tag>
      </div>
      <div class="update-time">
        <span>{{ $t('common.updated') }}: {{ formatRelativeTime(project.updatedAt) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  Folder,
  MoreFilled,
  Edit,
  Delete,
  Calendar,
  Warning,
  User,
  Document,
  Bell
} from '@element-plus/icons-vue'
import type { Project } from '@/types/project'
import type { TeamMember } from '@/types/team'
import { formatDate, formatRelativeTime } from '@/utils/date'
import { useTeamStore } from '@/stores/teamStore'

// Props
interface Props {
  project: Project
  canManage: boolean
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  edit: [project: Project]
  delete: [project: Project]
  view: [project: Project]
}>()

const { t } = useI18n()

// 计算属性
const isOverdue = computed(() => {
  if (!props.project.endDate || props.project.status === 'COMPLETED') return false
  return new Date(props.project.endDate) < new Date()
})

const isNearDeadline = computed(() => {
  if (!props.project.endDate || props.project.status === 'COMPLETED' || isOverdue.value) return false
  const endDate = new Date(props.project.endDate)
  const now = new Date()
  const diffDays = Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  return diffDays <= 7 && diffDays > 0
})

// 方法
const getPriorityType = (priority: string) => {
  const types: Record<string, string> = {
    'LOW': '',
    'MEDIUM': 'warning',
    'HIGH': 'danger',
    'URGENT': 'danger'
  }
  return types[priority] || ''
}

const getPriorityLabel = (priority: string) => {
  const labels: Record<string, string> = {
    'LOW': t('project.priority.low'),
    'MEDIUM': t('project.priority.medium'),
    'HIGH': t('project.priority.high'),
    'URGENT': t('project.priority.urgent')
  }
  return labels[priority] || priority
}

const getProgressColor = (progress: number) => {
  if (progress < 30) return '#f56c6c'
  if (progress < 70) return '#e6a23c'
  return '#67c23a'
}

const getManagerName = (managerId: number) => {
  // {{ AURA-X: Modify - 从teamStore获取真实的用户姓名信息. Approval: 寸止(ID:fix-manager-name). }}
  const teamStore = useTeamStore()
  const member = teamStore.teamMembers.find((m: TeamMember) => m.userId === managerId)
  return member?.username || member?.nickname || `用户 ${managerId}`
}

const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

const handleCardClick = () => {
  emit('view', props.project)
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'edit':
      emit('edit', props.project)
      break
    case 'delete':
      emit('delete', props.project)
      break
  }
}
</script>

<style scoped lang="scss">
.project-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--el-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;

    .project-info {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;

      .project-meta {
        flex: 1;

        .project-name {
          margin: 0 0 4px 0;
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          line-height: 1.4;
        }

        .project-priority {
          margin-top: 4px;
        }
      }
    }

    .card-actions {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }

  &:hover .card-actions {
    opacity: 1;
  }

  .card-content {
    margin-bottom: 12px;

    .project-description {
      margin: 0;
      font-size: 14px;
      color: var(--el-text-color-regular);
      line-height: 1.5;
    }
  }

  .card-progress {
    margin-bottom: 12px;

    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .progress-label {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }

      .progress-value {
        font-size: 12px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }
  }

  .card-dates {
    margin-bottom: 12px;

    .date-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      &.overdue {
        color: var(--el-color-danger);
        font-weight: 600;
      }

      .el-icon {
        font-size: 12px;
      }
    }
  }

  .card-manager {
    margin-bottom: 12px;

    .manager-info {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--el-text-color-secondary);

      .el-icon {
        font-size: 12px;
      }
    }
  }

  .card-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--el-text-color-secondary);

      .el-icon {
        font-size: 12px;
      }
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--el-border-color-lighter);

    .project-tags {
      display: flex;
      gap: 6px;
    }

    .update-time {
      font-size: 11px;
      color: var(--el-text-color-placeholder);
    }
  }
}

// 拖拽状态样式
.sortable-ghost {
  opacity: 0.5;
}

.sortable-chosen {
  transform: rotate(5deg);
}

.sortable-drag {
  transform: rotate(5deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
</style>
